<template>
  <!-- 热门评论 -->
  <div class="hotSrollbox">
    <div class="hotSrollbox-content">
      <div class="hotSrollboxText">
        <span>热门评论</span>
      </div>
      <vue-seamless-scroll
        :class-option="classOption"
        :data="listData"
        class="seamless-warp"
      >
        <ul class="item">
          <li v-for="(item, index) in listData" :key="index">
            <div
              class="itemImge"
              :class="'itemImge-' + index"
              :style="note"
            ></div>
            <span class="title">{{ item.name }}</span>
            <div class="date"><span >{{ item.text }}</span></div>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      num:"10rem",
      note: {
        background: "url(" + require("../assets/images/img.5000bb9.jpg") + ")",
        backgroundRepeat: "no-repeat",
      },
      listData: [
        { name: "***你:", text: "流量太多了月租便宜" },
        { name: "***静:", text: "流量太多了 每个月都用不完 郁闷" },
        { name: "一***天:", text: "还可以" },
        { name: "白***龙:", text: "还好吧，确实能省点钱" },
        { name: "0***0:", text: "腾讯所有的APP都不要流量" },
        { name: "萧***1:", text: "打游戏速度确实快一点，网速可以" },
        { name: "***燕:", text: "月租很便宜，挺好用的" },
        { name: "林***3:", text: "还可以，网速比较快，体验感不错" },               
      ],
    };
  },
  methods: {},
  computed: {
    // 轮播图控制器
    classOption() {
      
      return {
        step: 1.4, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: '', // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 1.509
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: '', // 单步运动停止的时间(默认值1000ms)800
        isSingleRemUnit:true,
      };
    },
  },
};
</script>
<style scoped>
.hotSrollbox {
  width: 90%;
  height: 6rem;
  margin: auto;
  margin-top: .40rem;
  border: .15rem solid #ff8d00;
  border-radius: .20rem;
  background-color: #fff;
}
.hotSrollbox-content {
  width: 90%;
  margin: auto;
  pointer-events: none;
}
.hotSrollboxText {

  padding: .1rem 0 .2rem 0;
  font-size: .6rem; 
  font-weight: 600;
  text-align: left;
}
.seamless-warp {
  height: 4rem;
  width: 100%;
  overflow: hidden;
  margin: auto;
}
.item li {
    overflow: hidden;
    display: flex;
    /* height: 1.2rem; */
    line-height: 0.6rem;
    margin-bottom: .5rem;
    background-color: #e0e0e0;
    border-radius: .5rem;
    flex-direction: row;
    align-items: center;
}

.title {
  display: inline-block;
  float: left;
  font-size: 0.3rem;
  width: 85px;
  margin-left: .25rem;
  margin-right: .25rem;
  text-overflow: ellipsis;
  white-space: nowrap;

}
.date {
  float: left;
  overflow: hidden;
  width: 7.5rem;
    text-overflow: ellipsis;
  white-space: nowrap;
  color: #515A6E;
 
}
.itemImge {
    float: left;
    width: 1.5rem;
    height: 0.8rem;
    margin: .1rem;
    /* margin-top: 0.17rem; */
    margin-left: 19px;
    border-radius: 50px;
    background-attachment: scroll;
    background-position: -.1rem 0 !important;
}
/* 0是第一个，1是第二个 */

.itemImge-1 {
  background-position-y: -1.06rem !important;
}
.itemImge-2 {
  background-position-y: -2.5rem !important;
}
.itemImge-3 {
  background-position-y: -3.94rem !important;
}
.itemImge-4 {
  background-position-y: -5.38rem !important;
}
.itemImge-5 {
  background-position-y: -6.82rem!important;
}
.itemImge-6 {
  background-position-y: -8.26rem !important;
}
.itemImge-7 {
  background-position-y: -9.70rem !important;
} 
.itemImge-8 {
  background-position-y: -11.14rem !important;
}
.itemImge-9 {
  background-position-y: -12.58rem!important;
}




</style>